{% extends 'cms/base.html' %}

{% block title %}
首页
{% endblock %}

{% block content %}
<!-- OVERVIEW -->
    <div class="panel panel-headline">
        <div class="panel-heading">
            <h3 class="panel-title">7日总结</h3>
            <p class="panel-subtitle">Period: {{ lastweek }} - {{ today }}</p>
        </div>
        <div class="panel-body">
            <div class="row">

                <div class="col-md-3">
                    <div class="metric">
                        <span class="icon"><i class="fa fa-shopping-bag"></i></span>
                        <p>
                            <span class="number">{{ saleNumber }}</span>
                            <span class="title">销量</span>
                        </p>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="metric">
                        <span class="icon"><i class="fa fa-money"></i></span>
                        <p>
                            <span class="number">{{ saleAmount }}</span>
                            <span class="title">销售额</span>
                        </p>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="metric">
                        <span class="icon"><i class="fa fa-credit-card"></i></span>
                        <p>
                            <span class="number">{{ buyAmount }}</span>
                            <span class="title">进货支出</span>
                        </p>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="metric">
                        <a href="{{ url_for('cms.hotbook') }}">
                            <span class="icon"><i class="fa fa-sort-numeric-asc"></i></span>
                            <p>
                            <span class="number">{{ hotBookNum }}</span>
                            <span class="title">热门图书</span>
                            </p>
                        </a>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-9" style="padding-right: 0">
                    <div id="week-chart" style="width: 780px; height: 350px; margin-right: 0; overflow: visible"></div>
                </div>
                <div class="col-md-3">
                    <div class="weekly-summary text-right">
                        <span class="number">¥{{ weeklyIncome }}</span>
                        <span class="info-label">7天利润</span>
                    </div>
                    <div class="weekly-summary text-right">
                        <span class="number">{{ monthlySaleNumber }}</span>
                        <span class="info-label">30天销量</span>
                    </div>
                    <div class="weekly-summary text-right">
                        <span class="number">¥{{ monthlyIncome }}</span>
                        <span class="info-label">30天利润</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- END OVERVIEW -->
    <div class="row">
        <div class="col-md-6">
            <!-- RECENT PURCHASES -->
            <div class="panel">
                <div class="panel-heading">
                    <h3 class="panel-title"><strong>最近订单</strong></h3>
                    <div class="right">
                        <button type="button" class="btn-toggle-collapse"><i class="lnr lnr-chevron-up"></i></button>
                        <button type="button" class="btn-remove"><i class="lnr lnr-cross"></i></button>
                    </div>
                </div>
                <div class="panel-body no-padding" style="overflow-x: auto;overflow-y: auto;height: 242px">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>订单号</th>
                                <th>书籍号</th>
                                <th>书名</th>
                                <th>时间</th>
                                <th>销售额</th>
                            </tr>
                        </thead>
                        <tbody>
                        {% for item in yesterdaySale %}
                            <tr>
                                <td>{{ item[0] }}</td>
                                <td>{{ item[1] }}</td>
                                <td>{{ item[2]|truncate(10, '...') }}</td>
                                <td>{{ item[3] }}</td>
                                <td>¥{{ item[4] }}</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
                <div class="panel-footer">
                    <div class="row">
                        <div class="col-md-6"><span class="panel-note"><i class="fa fa-clock-o"></i> 过去一天 </span></div>
                        <div class="col-md-6 text-right"><a href="#" class="btn btn-primary">更多订单</a></div>
                    </div>
                </div>
            </div>
            <!-- END RECENT PURCHASES -->
        </div>
        <div class="col-md-6">
            <!-- MULTI CHARTS -->
            <div class="panel">
                <div class="panel-heading">
                    <h3 class="panel-title"><strong>最近入库</strong></h3>
                    <div class="right">
                        <button type="button" class="btn-toggle-collapse"><i class="lnr lnr-chevron-up"></i></button>
                        <button type="button" class="btn-remove"><i class="lnr lnr-cross"></i></button>
                    </div>
                </div>
                <div class="panel-body no-padding" style="overflow-x: auto;overflow-y: auto;height: 242px">
                    <table class="table table-striped" style="border-collapse: collapse;">
                        <thead>
                            <tr>
                                <th>书籍号</th>
                                <th>书名</th>
                                <th>入库数</th>
                                <th>进货单价</th>
                                <th>进货时间</th>
                            </tr>
                        </thead>
                        <tbody>
                        {% for item in yesterdayBuyIn %}
                            <tr>
                                <td width="20%">{{ item[0] }}</td>
                                <td width="30%">{{ item[1]|truncate(8, '...') }}</td>
                                <td width="10%">{{ item[2] }}</td>
                                <td width="10%">¥{{ item[3] }}</td>
                                <td>{{ item[4] }}</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
                <div class="panel-footer">
                    <div class="row">
                        <div class="col-md-6"><span class="panel-note"><i class="fa fa-clock-o"></i> 过去一天 </span></div>
                        <div class="col-md-6 text-right"><a href="#" class="btn btn-primary">查看更多</a></div>
                    </div>
                </div>
            </div>
            <!-- END MULTI CHARTS -->
        </div>
    </div>



    <div class="row">
        <div class="col-md-12">
            <!-- RECENT PURCHASES -->
            <div class="panel">
                <div class="panel-heading">
                    <h3 class="panel-title"><strong>库存情况</strong></h3>
                    <div class="right">
                        <button type="button" class="btn-toggle-collapse"><i class="lnr lnr-chevron-up"></i></button>
                        <button type="button" class="btn-remove"><i class="lnr lnr-cross"></i></button>
                    </div>
                </div>
                <div class="panel-body no-padding" style="overflow-x: auto;overflow-y: auto;height: 280px">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>书籍号</th>
                                <th>书名</th>
                                <th>剩余数量</th>
                                <th>作者</th>
                                <th>出版社</th>
                                <th>进价</th>
                            </tr>
                        </thead>
                        <tbody>
                        {% for item in Inventory %}
                            <tr>
                                <td>{{ item[0] }}</td>
                                <td>{{ item[1]|truncate(20, '...') }}</td>
                                <td>{{ item[2] }}</td>
                                <td>{{ item[3] }}</td>
                                <td>{{ item[4] }}</td>
                                <td>¥{{ item[5] }}</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
                <div class="panel-footer">
                    <div class="row">
                        <div class="col-md-6"><span class="panel-note"></span>></div>
                        <div class="col-md-6 text-right"><a href="#" class="btn btn-primary">查看更多</a></div>
                    </div>
                </div>
            </div>
            <!-- END RECENT PURCHASES -->
        </div>

    </div>

{% endblock %}

{% block js %}
    <script type="text/javascript">
        //指定图标的配置和数据
        var option = {
            title:{
                text:'七日销量-销售额',
                textStyle:{
                    fontWeight: 'normal'
                }
            },
{#            鼠标放在图片上显示出十字坐标#}
            tooltip: {
                trigger: 'item'
            },
            toolbox: {
                right: '50',
                feature: {
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    saveAsImage: {show:true}
                }
            },

            legend:{
                data:['销量', '销售额']
            },
            xAxis:{
                type:'category',
                data: [1, 2, 3, 4, 5, 6, 7],
            },

            series:[{
                name:'销量',
                type:'bar',
                data:{{weekSaleNumberList|safe }},

                //yAxisIndex: 1,
                itemStyle: {
                        color: "#67e0e3"
                },
                areaStyle:{}
            },{
                name: '销售额',
                type: 'bar',
                data:{{ weekSaleAmountList|safe }},
                yAxisIndex: 1,
                itemStyle:{
                    color: "#37a2da"
                },
                areaStyle:{}
            }
            ],
            yAxis:[{
                type:'value',
{#                不显示坐标的网格#}
                splitLine: {
                    show: false
                },
                min: 0,
                max: {{ weekSaleNumberList|listMax|safe }}
            },{
                type:'value',
{#                不显示坐标的网格#}
                splitLine: {
                    show: false
                },
                min: 0,
                max: {{ weekSaleAmountList|listMax|safe}}
            }]
        };
        //初始化echarts实例
        var myChart = echarts.init(document.getElementById('week-chart'));

        //使用制定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
{% endblock %}